<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="second.css" />
		<link rel="stylesheet" type="text/css" href="../plugin/layer/skin/laypage.css" />
		<link rel="stylesheet" type="text/css" href="../plugin/layer/layer.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/base.css"/>
		<style>
			#content{
				width:100%;
			}
		</style>
	</head>

	<body>
		<!--<div id="header"></div>
		<div id="search_container"></div>
		<div id="nav_menu"></div>-->

		<!--商城头部-->
		<div id="header"></div>
		<div id="headerBox"></div>
		<!--商城头部结束-->

		<!--商城导航-->
		<div id="hmNav"></div>
		<!--商城导航结束-->

			<div id="crumbs" class="second-dh" v-cloak>
				<a href="../view/index.html">首页<img src="../images/second/allSecond_mianbao.png" /></a>
				<!--<a href="../view/index.html">全部分类<img src="../images/second/allSecond_mianbao.png" /></a>-->
				<a href="#" v-if="crumbs.GoodsCatName3!=undefined">{{crumbs.GoodsCatName3}}<img src="../images/second/allSecond_mianbao.png" /></a>
				<a href="#" v-if="crumbs.GoodsCatName2!=undefined">{{crumbs.GoodsCatName2}}<img src="../images/second/allSecond_mianbao.png" /></a>
				<a href="#" v-if="crumbs.GoodsCatName1!=undefined">{{crumbs.GoodsCatName1}}</a>
			</div>
			<div class="background_white brand_row" style="display: none;">
				<div class="second-top" style="margin-bottom:5px;">
					<div class="brand_box">
						<div class="brand_title">
							<p>品牌:</p>
						</div>
						<div class="brand_content">
							<!--<div class="brand_item active" data-id="111">
								<img src="../img/2004996806c50ce468ced7aa51ea30e1.png" alt=""/>
							</div>-->
						</div>
					</div>
				</div>
			</div>
			<div class="background_white">
				<div class="second-top" style="margin: 0 auto;padding-top: 0;">
					<div class="second-top_3">
						<div class="second-top_3_1">
							<p>价格:</p>
						</div>
						<div class="second-top_3_2">
							<div class="second-div">
								<a class="active" href="javascript:void (0)">不限</a>
							</div>
							<div class="second-div">
								<a href="javascript:void (0)">0-200</a>
							</div> 
							<div class="second-div">
								<a href="javascript:void (0)">200-600</a>
							</div>
							<div class="second-div">
								<a href="javascript:void (0)">600-1000</a>
							</div>
							<div class="second-div">
								<a href="javascript:void (0)">1000-3000</a>
							</div>
							<div class="second-div">
								<a href="javascript:void (0)">3000-6000</a>
							</div>
							<div class="second-div">
								<a href="javascript:void (0)">6000-10000</a>
							</div>
	
						</div>
	
					</div>
	
				</div>
			</div>
			
			<div class="clear"></div>

				<div class="second-center">
					<div class="second-center-top">
						<div class="second-sxa">
							<div class="zh" data-type="">
								综合
							</div>
							<div class="xl" data-type="saleNum">
								<span>销量</span>
								<img src="../images/second/allSecond_downNo.png" />
							</div>
							<div class="jg" data-type="shopPrice">
								<span>价格</span>
								<img src="../images/second/allSecond_downNo.png" />
							</div>
							<div class="pls" data-type="appraiseNum">
								<span>评论数</span>
								<img src="../images/second/allSecond_downNo.png" />
							</div>
							<div class="rq" data-type="visitNum">
								<span>人气</span>
								<img src="../images/second/allSecond_downNo.png" />
							</div>
							<div class="sjsj" data-type="ssaleTime">
								<span>上架时间</span>
								<img src="../images/second/allSecond_downNo.png" />
							</div>
						</div>
						<div class="jgqj">
							<input type="number" class="min" placeholder="￥" />
							-
							<input type="number" class="max" placeholder="￥" />
							<div class="qdbtn">
								确定
							</div>
						</div>
						<div class="sx">
							<input type="checkbox" class="goods_stock" onclick="changeStock()"/>
							<p>只显示有货商品</p>
							<input type="checkbox" class="new_obj" onclick="changeNew()"/>
							<p>新品</p>
						</div>
					</div>
					<div class="clear"></div>
	
					<!--图-->
					<div class="second-center-cen">
	
						<div id="content" v-cloak>
							<img v-if="main.length==0" src="../img/pic_zanwu.jpg" style="margin:20px auto;">
							<div class="second-center-cen-1" v-for="c1 in main" @click="go_detail(c1.goodsId)" >
								<img  v-if="c1.goodsImg.substr(0,4)=='http'" :src="c1.goodsImg" />
								<img  v-else :src="imgUrlS+c1.goodsImg" />
								
								<div class="second-center-cen-txt" style="height:60px;overflow: hidden;">
									<p class="p1">{{c1.goodsName}}</p>
								</div>
								<!--<div class="second-center-cen-txt1">
									<p class="p2">{{c1.goodsName}}</p>
									<p class="p3"><span>￥</span>{{c1.shopPrice}}</p>
								</div>-->
								<div style="text-align: center;color:red;padding-top:3px;">￥{{c1.shopPrice}}</div>
							</div>
						</div>
	
					</div>
					<div id="showAd" class="spjx">
						<div class="spjx_title">
							<p class="p4">商品精选</p>
							<p class="p5">广告</p>
						</div>
						
						<!--<div class="spjx_div" v-for="ads in ADS">
							<img v-if="ads.adFile.substr(0,4)=='http'" :src="ads.adFile" />
							<img v-else :src="imgUrlS+ads.adFile" />
							<p class="p6">烟台大鸭梨压力压力压力发到事发地时的阿达是发范德萨</p>
							<p class="p7"><span>￥</span>29.9</p>
						</div>-->
						<div class="spjx_div">
							<img src="../img/2f7a1ee4ddda87864e4a8210ee10eeac.jpg"/>
						</div>
					</div>
	
				</div>
			
			<div id="pager" style="text-align: center;"></div>
		</div>
		<!--<div id="ck1"></div>-->
		<div id="ck3"></div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../plugin/layer/layer.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.lazyload.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/ljf_base.js"></script>
		<script src="../js/lxs_jk.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var search_data = {};//查询条件
			var cid_name = 'cid';//分类Id 或 名称查询
			var type = '';//排序类别
			var statu = 1;//降序1 升序2
			var pages = 1;//总页数
			var pageNum = 1;//当前页
			var isNew = '';//只显示新品
			var goodsStock = '';//只显示有货
			//获取地址栏
			var vm2 = new Vue({
				el: "#crumbs",
				data: {
                    // 面包屑导航
                    crumbs: [],
				}
			});
			var vm3 = new Vue({
				el: "#content",
				data: {
				    main: [],
				},
				methods:{
					go_detail:function(id){//方法 
						location.href="../view/detail.html?goodsId="+id;
					},
				}
			});
            var vm4 = new Vue({
                el: "#showAd",
                data: {
                    ADS: [],
                    imgUrlS: imgUrlS
                }
            });
            
			$(function(){
                if(gup('catId')){//根据分类Id 查询
                	cid_name = 'cid';
                	// 面包屑导航
					$.ajax({
						url: SURL + "goodsCats/getGoodscatsByGoodsCatId",
						data: {
	                        goodsCatId: gup('catId')
						},
						success: function (data) {
	                        vm2.crumbs = data.entity;
	                    }
					});
					
					//根据分类id获取品牌列表
					$.ajax({
						url: SURL + "goods/getCatBrands",
						data: {
	                        catId: gup('catId')
						},
						async:false,
						success: function (data) {
							if(data.entity.length>0){
								$('.brand_row').show();
								var html = '';
								var nowBrand = '';
								if(gup('brandId')){
									nowBrand = gup('brandId');
								}
								$.each(data.entity,function(i,v){
									var name = 'brand_item';
									if(v.brandId == nowBrand){
										name = 'brand_item active';
									}	
									html+='<div class="'+name+'" data-id="'+v.brandId+'">'
										+	'<img src="'+imgUrl+v.brandImg+'" alt=""/>'
										+'</div>';
								})
								$('.brand_content').html(html);
							}else{
								$('.brand_row').hide();
							}
	                    }
					});
                }else if(gup('goodsName')){//根据物品名称模糊查询
                	cid_name = 'name';
                }
				getList();//查询商品列表
				initPage();
				//排序
                $(".second-sxa div").click(function () {
                    var $obj = $(".second-sxa div");
                    $obj.css({"color":"#333333"});
                    $obj.removeClass("pxActive");
                    $(this).css({"color":"#ED5D2A"}).addClass("pxActive");
                    
                    type = $(this).attr('data-type');
                    if ($(this).find('img').attr('src')=='../images/second/allSecond_downNo.png') {
                    	statu = 1;//降序
                        $(this).find('img').attr('src','../images/second/allSecond_downYes.png');
                    }else if ($(this).find('img').attr('src')=='../images/second/allSecond_downYes.png') {
                    	statu = 2;//升序
                        $(this).find('img').attr('src','../images/second/allSecond_upYes.png');
                    }else if ($(this).find('img').attr('src')=='../images/second/allSecond_upYes.png'){
                    	statu = 1;//降序
                        $(this).find('img').attr('src','../images/second/allSecond_downYes.png');
					}
					
					getList();
					initPage();
                    $obj.each(function(){
                        if (!$(this).is(".pxActive")) {
                            $(this).find('img').attr('src',"../images/second/allSecond_downNo.png");
						}
                    });

                });

				$(".second-top_3_2 div a").click(function(){
                    $(this).parent().siblings("div").find("a").removeClass("active");
					$(this).addClass("active");
				});
				
			    // 鼠标点击事件
			    $(".second-div").click(function () {
					var str = $(this).find("a").text();
					var arr = str.split("-");
					var min = arr[0];
					var max = arr[1];
                    if (str != "不限") {
                        pxPlice(min,max);
                    }else if (str == "不限"){
                        pxPlice("","");
					}
                });
			    $(".qdbtn").click(function () {
					var min = parseInt($(this).siblings("input[class=min]").val());
					var max = parseInt($(this).siblings("input[class=max]").val());
                    if (min > max) {
                        layer.msg("商品最小值大于最大值");
                        return;
                    }
					pxPlice(min,max)
                });

                // 右侧广告
//				$.ajax({
//					url: SURL + "ads/showAds",
//                  success: function (data) {
//						vm4.ADS = data.entity;
//                      console.log(data.entity);
//                  }
//				})
			});
			
			function pxPlice(min,max){//根据价格筛选
				search_data.shopPrice1 =  min;
				search_data.shopPrice2 =  max;
                getList();
                initPage();
			};
			
			function getList(){//根据分类id 排序筛选商品
				console.log(new Date().getSeconds());
				var data = $.extend(true,{},search_data);
				
				//排序
				if(type){
					data[type]=statu;
				}
				//分页
				data.pageNum = pageNum;
				//是否只显示新品
				data.isNew = isNew;
				//是否只显示有货
				data.goodsStock = goodsStock;
				//品牌
				var brandIds = [];
				var brandList = $('.brand_content .active');
				if(brandList){
					$.each(brandList,function(i,v){
						brandIds.push($(this).data('id'));
					})
					data.brandIds = brandIds.join(',');
				}
				
				if(cid_name=='cid'){
					data.goodsCatId = gup('catId');
					console.log(data);
					$.ajax({//根据分类Id 获取商品列表
	                    url: SURL + "goodsCats/getGoodscatsSelGoods",
	                    data: data,
	                    async:false,
	                    success: function (data) {
	                    	console.log(data);
	                        vm3.main = data.entity;
	                        pages = data.page;
	                        console.log(new Date().getSeconds());
	                    }
	                });
				}else{
					data.goodsName = gup('goodsName');
					console.log(data);
					$.ajax({//根据分类Id 获取商品列表
	                    url: SURL + "goodsCats/getGoodscatsSelGoods",
	                    data: data,
	                    async:false,
	                    success: function (data) {
	                    	console.log(data);
	                        vm3.main = data.entity;
	                        pages = data.page;
	                    }
	                });
	                
				}
				
			};
			
			function changeNew(){
				if($('.new_obj').get(0).checked){
					//console.log('选中');
					isNew = 1;
				}else{
					//console.log('取消');
					isNew = '';
				}
				getList();
			}
			
			function changeStock(){
				if($('.goods_stock').get(0).checked){
					//console.log('选中');
					goodsStock = 1;
				}else{
					//console.log('取消');
					goodsStock = '';
				}
				getList();
			}
			
			//选择品牌
			$('.brand_content').on('click','.brand_item',function(){
				$(this).toggleClass('active');
				getList();
                initPage();
			});
		</script>

	</body>

</html>